<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-calendar"></i>商户管理</el-breadcrumb-item>
                <el-breadcrumb-item>商户信息</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-form :inline="true" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
              <el-form-item label="商户名称" prop="name">
                <el-input v-model="ruleForm.name" class="pr15" :disabled="isCantEdit"></el-input>
              </el-form-item>
              <el-form-item label="手机号" prop="mobile">
                <el-input v-model="ruleForm.mobile" class="pr15" :disabled="isCantEdit"></el-input>
              </el-form-item>
              <el-form-item label="所属代理商" prop="agentId">
                  <el-select v-model="ruleForm.agentId" placeholder="请选择" :disabled="isCantEdit">
                      <el-option
                      v-for="item in agentList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                      </el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="登陆用户名" prop="code">
                <el-input v-model="ruleForm.code" class="pr15" :disabled="isCantEdit"></el-input>
                </el-form-item>
                <el-form-item label="登陆密码" prop="password">
                  <el-input type="password" v-model="ruleForm.password" class="pr15" :disabled="isCantEdit" placeholder="请输入登陆密码"></el-input>
                </el-form-item>
                <el-form-item label="确认登陆密码" prop="checkPwd">
                  <el-input type="password" v-model="ruleForm.checkPwd" :disabled="isCantEdit" class="pr15" placeholder="请再次输入登陆密码"></el-input>
              </el-form-item>
              <div class="btn-ruleForm" v-if="$route.query.action !== 'query'">
                <el-form-item>
                    <el-button type="primary" @click="submitForm">提交</el-button>
                    <el-button @click="resetForm">重置</el-button>
                </el-form-item>
              </div>
            </el-form>

        </div>
    </div>
</template>

<script>
    import BW from '../../../assets/scripts/common/bwCommon'

    export default {
        name: 'baseform',
        data() {
          var validatePass = (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请输入正确的新密码!'));
              } else {
                if (this.ruleForm.checkPwd !== '') {
                  this.$refs.ruleForm.validateField('checkPwd');
                }
                callback();
              }
          };
          var validatePwd = (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请输入正确的密码!'));
              } else if (value !== this.ruleForm.password) {
                console.log(value, this.ruleForm.password)
                callback(new Error('两次密码输入不一致!'));
              } else {
                callback();
              }
          };
          return {
            agentList: [],    // 代理商列表
            ruleForm: {
              name: '',
              mobile:'',
              agentId:'',
              code:'',
              password:'',
              checkPwd:''
            },
            rules: {
              name: [
                { required: true, message: '请输入名称', trigger: 'blur' }
              ],
              mobile: [
                { required: true, message: '请输入手机号', trigger: 'blur' }
              ],
              agentId: [
                { required: true, message: '请填写所属代理商', trigger: 'blur' }
              ],
              code: [
                { required: true, message: '请输入登陆名', trigger: 'blur' }
              ],
              password: [
                { required: true,validator: validatePass, trigger: 'blur' }
              ],
              checkPwd: [
                { required: true,validator: validatePwd, trigger: 'blur' }
              ]
            },
            isCantEdit: true
          }
        },
        mounted() {
          this.resetForm()
          this.isCantEdit = this.$route.query.action === 'query'
          if(this.$route.query.action === 'edit' || this.$route.query.action === 'query'){
            this.getDetailData(this.$route.query.id);
          } else {
            this.getAllData()
          }
        },
        methods: {
          async getDetailData(id) {
            let res = await this.request('merchantDetail', {
              merchantId: id
            }, 'get');
            res.data.agentId = Number(res.data.agentId)
            this.ruleForm = res.data;
            this.getAllData()
          },
          async getAllData() {
              let res = await this.request('allAgentList')
              this.agentList = res.data
          },
          submitForm() {
            this.$refs.ruleForm.validate(async (valid) => {
              if (valid) {
                if (this.$route.query.action === 'edit') {
                  this.ruleForm.merchantId = this.$route.query.id
                  await this.request('merchantEdit', this.ruleForm)
                  BW.Toast('修改成功！')
                  this.$router.push('/merchantList');
                } else {
                  await this.request('merchantAdd', this.ruleForm)
                  BW.Toast('新增成功！')
                  this.$router.push('/merchantList');
                }

              } else {
                console.log('error submit!!');
                return false;
              }
            });
          },
          resetForm() {
            this.$refs.ruleForm.resetFields();
          }
        }
    }
</script>
<style scoped>
    .btn-ruleForm {
      margin-top: 50px;
      text-align: center;
    }
    .pr15{
      padding-right: 15px;
    }
</style>
